<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Pricing</title>
	<link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
    <#if isMobile == false>
		<link rel="stylesheet" href="${request.contextPath}/static/css/common.css">
		<link rel="stylesheet" href="${request.contextPath}/static/css/pricing.css">
    <#else>
		<link rel="stylesheet" href="${request.contextPath}/static/css/mobile/common.css">
		<link rel="stylesheet" href="${request.contextPath}/static/css/mobile/pricing.css">
    </#if>
</head>
<body>
<#include "../header_new.ftl">
<main>
    <#if isMobile == false>
		<section>
			<div class="wrapper">
				<h2>Pricing & Plans</h2>
			</div>
		</section>
    <#else>
		<section>
			<div class="pricing-tab">
				<div class="tab-item is-active" data-tab="0" onclick="tabChange(this)">SINGLE</div>
				<div class="tab-item" data-tab="1" onclick="tabChange(this)">ADVANCED</div>
				<div class="tab-item" data-tab="2" onclick="tabChange(this)">PRO</div>
			</div>
		</section>
    </#if>
	<section>
		<div class="wrapper version-list">
            <#list versionProduct as version>
                <#if version.id != 2>
					<div class="version-item">
                        <#if version_index != 0>
							<div class="title">${version.name}</div>
                        <#else>
							<div class="title">SINGLE</div>
                        </#if>
						<div class="sub-title">
                            <#if version.id == 1>
								Each unlocked report costs 1 credit, will be continuously updating for 30 days.
                            <#elseif version.id == 3>
								50 unlocked reports daily at your choice, each report is valid for 24 hours.
                            <#else>
								200 unlocked reports daily at your choice, each report is valid for 24 hours.
                            </#if>
						</div>
						<div class="product-list">
                            <#if version.id == 1>
                                <#list reportProduct as report>
									<div class="product-item <#if report_index == 0>is-active</#if>"
									     onclick="itemActive(this)">
										<input type="radio" <#if report_index == 0>checked</#if> value="${report.id?c}">
										<div class="center">
											<div class="title">${report.name}</div>
                                            <#if report_index != 0>
												<div class="sub-title">
													<span>Save ${report.discount  * 100}%</span>
												</div>
                                            </#if>
										</div>
										<div class="price">$${report.deductPrice!'9999'}</div>
									</div>
                                </#list>
                            <#else>
								<div class="product-item" onclick="itemActive(this, 1, ${version.id})">
									<input type="radio" value="${version.id?c}">
									<div class="center">
										<div class="title">1 Month</div>
									</div>
									<div class="price">$${(version.deductPrice)!'9999'}</div>
								</div>
								<div class="product-item" onclick="itemActive(this, 2)">
									<input type="radio" value="${version.id?c}">
									<div class="center">
										<div class="title">6 Months</div>
                                        <#if version.halfYearDiscount??>
											<div class="sub-title">
												<span>Save ${version.halfYearDiscount * 100}%</span>
											</div>
                                        </#if>
									</div>
									<div class="price">$${version.deductHalfYearPrice!'9999'}</div>
								</div>
								<div class="product-item" onclick="itemActive(this, 3)">
									<input type="radio" value="${version.id?c}">
									<div class="center">
										<div class="title">12 Months</div>
                                        <#if version.yearDiscount??>
											<div class="sub-title">
												<span>Save ${version.yearDiscount * 100}%</span>
											</div>
                                        </#if>
									</div>
									<div class="price">$${version.deductYearPrice!'9999'}</div>
								</div>
                            </#if>
						</div>
					</div>
                </#if>
            </#list>
            <#if isMobile == true>
				<div class="wrapper pay-wrap">
                    <#if login != false>
						<div id="paypal-btn" class="btn"></div>
                    <#else>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn btn-info">Get Started</button>
						</a>
                    </#if>
				</div>
            </#if>
		</div>
        <#if isMobile == false>
			<div class="wrapper pay-wrap">
                <#if login != false>
					<div id="paypal-btn" class="btn"></div>
                <#else>
					<a href="javascript:;" onclick="toLogin()">
						<button class="btn btn-info">Get Started</button>
					</a>
                </#if>
			</div>
        </#if>
	</section>
    <#if isMobile == false>
		<section>
			<div class="wrapper">
				<h2>Full Plan Comparison</h2>
				<table class="pricing-table">
					<theader>
						<tr>
							<th>Features</th>
							<th>SINGLE</th>
							<th>ADVANCED</th>
							<th>PRO</th>
						</tr>
					</theader>
					<tbody>
					<tr class="sub-title">
						<td colspan="4">Version Intro</td>
					</tr>
					<tr>
						<td>Reports included</td>
						<td>1/credit</td>
						<td>50/day</td>
						<td>200/day</td>
					</tr>
					<tr>
						<td>Valid period</td>
						<td>30 days</td>
						<td>24 hours</td>
						<td>24 hours</td>
					</tr>
					<tr class="sub-title">
						<td colspan="4">TikToker Analytics</td>
					</tr>
					<tr>
						<td>Basic info</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Video data</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Growth trends</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Post activity</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Audience demographic</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Video list</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="sub-title">
						<td colspan="4">TikTok Analytic Tools (PC only)</td>
					</tr>
					<tr>
						<td>Hot videos</td>
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr>
						<td>Hot sounds</td>
						<td>Top 10</td>
						<td>Top 150</td>
						<td>Top 500</td>
					</tr>
					<tr>
						<td>Hot hashtags</td>
						<td>Top 10</td>
						<td>Top 150</td>
						<td>Top 500</td>
					</tr>
					<tr>
						<td>TikToker leaderboards</td>
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr>
						<td>TikTok data monitor</td>
						<td>1 user</td>
						<td>50 users</td>
						<td>100 users</td>
					</tr>
					<tr>
						<td>TikToker comparison</td>
						<td>1/month</td>
						<td>50/month</td>
						<td>100/month</td>
					</tr>
					</tbody>
				</table>
			</div>
		</section>
    <#else>
		<section>
			<h2>Full Plan Comparison</h2>
			<div class="table-wrap">
				<table class="pricing-table">
					<theader>
						<tr>
							<th>SINGLE</th>
							<th>ADVANCED</th>
							<th>PRO</th>
						</tr>
					</theader>
					<tbody>
					<tr class="title" data-row="1" onclick="troggleDetail(this)">
						<td colspan="3">
							<div class="td-row">
								<div class="left">Version Intro</div>
								<div class="right">
									<i class="iconfont iconbofang-copy"></i>
								</div>
							</div>
						</td>
					</tr>
					<tr class="tr-1">
						<td colspan="3" class="sub-title">Reports included</td>
					</tr>
					<tr class="tr-1">
						<td>1/credit</td>
						<td>50/day</td>
						<td>200/day</td>
					</tr>
					<tr class="tr-1">
						<td colspan="3" class="sub-title">Valid period</td>
					</tr>
					<tr class="tr-1">
						<td>30 days</td>
						<td>24 hours</td>
						<td>24 hours</td>
					</tr>
					<tr class="title" data-row="2" onclick="troggleDetail(this)">
						<td colspan="3">
							<div class="td-row">
								<div class="left">TikToker Analytics</div>
								<div class="right">
									<i class="iconfont iconbofang-copy"></i>
								</div>
							</div>
						</td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Basic info</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Video data</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Growth trends</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Post activity</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Audience demographic</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="tr-2">
						<td colspan="3" class="sub-title">Video list</td>
					</tr>
					<tr class="tr-2">
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="title" data-row="3" onclick="troggleDetail(this)">
						<td colspan="3">
							<div class="td-row">
								<div class="left">TikTok Analytic Tools (PC only)</div>
								<div class="right">
									<i class="iconfont iconbofang-copy"></i>
								</div>
							</div>
						</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">Hot videos</td>
					</tr>
					<tr class="tr-3">
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">Hot sounds</td>
					</tr>
					<tr class="tr-3">
						<td>Top 10</td>
						<td>Top 150</td>
						<td>Top 500</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">Hot hashtags</td>
					</tr>
					<tr class="tr-3">
						<td>Top 10</td>
						<td>Top 150</td>
						<td>Top 500</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">TikToker leaderboards</td>
					</tr>
					<tr class="tr-3">
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">TikTok data monitor</td>
					</tr>
					<tr class="tr-3">
						<td>1 user</td>
						<td>50 users</td>
						<td>100 users</td>
					</tr>
					<tr class="tr-3">
						<td colspan="3" class="sub-title">TikToker comparison</td>
					</tr>
					<tr class="tr-3">
						<td>1/month</td>
						<td>50/month</td>
						<td>100/month</td>
					</tr>
					</tbody>
				</table>
			</div>
		</section>
    </#if>
</main>
<#if isMobile == false>
    <#include "../footer.ftl">
</#if>
<script src="https://www.paypal.com/sdk/js?client-id=AWLEIYlKUuvbmfBohXkOsJjFrDglUH8IpIVFy0X2Z2hvOb5FTce8oOijeRp0jFIcN7ihdKvB0yEKtbfP&locale=en_US"></script>
<script>
    init()

    function init() {
        <#if login == true>
        initPayPal()
        </#if>
    }

    function initPayPal() {
        const self = this
        paypal.Buttons({
            locale: 'en_US',
            // env: 'sandbox',
            fundingSource: paypal.FUNDING.PAYPAL,
            style: {
                label: 'paypal',
                shape: 'rect',
                color: 'blue',
                height: 36,
                tagline: false
            },
            createOrder: () => {
                // 创建订单
                return createProductOrder()
            },
            onError: err => {
                console.log('err: ', err)
            },
            onApprove: function (data, actions) {
                return actions.order.capture().then(function (details) {
                    // 支付成功
                    if (details.status === 'COMPLETED') {
                        // console.log('支付成功')
                        let config = {
                            showTop: false,
                            class: 'modal',
                            content: 'pay success',
                            isShowConfirmBtn: false,
                            confirmBtnText: 'I know',
                            isShowCancelBtn: false
                        }
                        showModal(config)
                    }
                })
            }
        }).render('#paypal-btn')
    }

    let checkedProductId = 5
    let monthType = 1
    let versisonType = 1

    async function createProductOrder() {
        let data = {
            monthType: monthType,
            productId: checkedProductId
        }
        if (versisonType == 1) {
            delete data.monthType
        }
        let res = await fetch('${contextPath}/v1/createOrder', {
            method: 'post',
            headers: {'content-type': 'application/json'},
            body: JSON.stringify(data)
        });
        let result = await res.json()
        return result.Data.orderId
    }

    function itemActive(el, month = 1, versionType = 1) {
        versisonType = versionType
        monthType = month
        let checkedRadio = document.querySelectorAll('input[type="radio"]:checked')
        checkedRadio.forEach(item => {
            item.parentElement.classList.remove('is-active')
            item.checked = false
        })
        let radio = el.querySelector('input')
        radio.checked = true
        checkedProductId = radio.value
        el.classList.add('is-active')
    }

    <#if isMobile == true>
    if (window.location.href.indexOf('/influencer/') > -1) {
        let advancedEl = document.querySelectorAll('.pricing-tab .tab-item')[1]
        tabChange(advancedEl)
    }

    function tabChange(el) {
        // 隐藏就的active tab
        let oldActiveEl = document.querySelector('.tab-item.is-active')
        oldActiveEl.classList.remove('is-active')
        let tabInx = +oldActiveEl.getAttribute('data-tab')
        let tabs = document.querySelectorAll('.version-item')
        tabs[tabInx].hide()

        // 显示新的active tab
        el.classList.add('is-active')
        let newActiveEl = tabs[+el.getAttribute('data-tab')]
        newActiveEl.show()
        // 默认新选项选中
        let item = newActiveEl.querySelector('.product-item')
        item.click()
    }

    function troggleDetail(el) {
        let rowInx = el.getAttribute('data-row')
        let isClose = el.querySelector('.right').classList.contains('close')
        document.querySelectorAll('.tr-' + rowInx).forEach(item => {
            if (isClose) {
                item.show('table-row')
            } else {
                item.hide()
            }
        })
        el.querySelector('.right').classList.toggle('close')
    }

    </#if>
</script>
</body>
</html>